<script setup lang="jsx">
import { ref, watch } from 'vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { addPost, updatePost } from '@/service/api';

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operateType: {
    type: String,
    default: () => null
  }
});

const emit = defineEmits(['success']);

const { formRef, validate } = useAntdForm();
const { createRequiredRule } = useFormRules();
const rules = {
  postName: createRequiredRule('请输入岗位名称'),
  postCode: createRequiredRule('请输入岗位编码'),
  postSort: createRequiredRule('请输入显示顺序')
};

const model = ref({
  postName: null,
  postCode: null,
  postSort: null,
  status: '0',
  remark: null
});

async function submitForm() {
  if (!props.operateType) return;
  await validate();
  let pro;
  if (props.operateType === 'edit') {
    pro = updatePost({
      postId: props.currentRow.postId,
      ...model.value
    });
  } else {
    pro = addPost(model.value);
  }
  pro.then(({ error }) => {
    if (!error) {
      window?.$message?.success('操作成功!');
      emit('success');
    }
  });
}

watch(
  () => props.currentRow,
  val => {
    if (val) {
      const { postName, postCode, postSort, status, remark } = val;
      model.value = { postName, postCode, postSort, status, remark };
    } else {
      model.value = {
        postName: null,
        postCode: null,
        postSort: null,
        status: '0',
        remark: null
      };
    }
  },
  {
    deep: true,
    immediate: true
  }
);

defineExpose({
  submitForm
});
</script>

<template>
  <AForm ref="formRef" :model="model" :rules="rules" :label-col="{ lg: 8, xs: 4 }" label-wrap>
    <ARow :gutter="20">
      <ACol :lg="24" :xs="24">
        <AFormItem name="postName" label="岗位名称" :label-col="{}">
          <AInput v-model:value="model.postName" placeholder="请输入部门名称" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="postCode" label="岗位编码" :label-col="{}">
          <AInput v-model:value="model.postCode" placeholder="请输入岗位编码" autocomplete="off"></AInput>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="postSort" label="显示顺序" :label-col="{}">
          <AInputNumber
            v-model:value="model.postSort"
            placeholder="请输入显示顺序"
            class="w-full"
            autocomplete="off"
          ></AInputNumber>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24">
        <AFormItem name="status" label="岗位状态" :label-col="{}">
          <ARadioGroup v-model:value="model.status">
            <ARadio value="0">正常</ARadio>
            <ARadio value="1">停用</ARadio>
          </ARadioGroup>
        </AFormItem>
      </ACol>
      <ACol :lg="24" :xs="24" class="mt-15px">
        <AFormItem name="remark" label="备注" :label-col="{}">
          <ATextarea v-model:value="model.remark" placeholder="请输入备注" :rows="4" autocomplete="off" />
        </AFormItem>
      </ACol>
    </ARow>
  </AForm>
</template>

<style></style>
